<style scoped lang="less">
.preview-video {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000;
    .close {
        position: fixed;
        top: 10px;
        right: 30px;
    }
    .video-content {
        padding-top: 10%;
        width: 100%;
        height: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .video {
            background-size: cover; 
        }
    }
}
</style>

<template>
    <div class="preview-video" v-if="videoDoc">
         <el-button
            class='close'
            circle
            icon="el-icon-close"
            @click="onClosePage" 
        />
        <div class="video-content">
            <video
                v-if="videoDoc"
                class="video"
                autoplay
                preload
                controls 
                width="100%"
                height="90%"
                :src="url" 
            />
        </div>
    </div>
</template>

<script>
export default {
  name: 'preview-video',
    props: {
    },
    data() {
      return {
          videoDoc: false,
          url: ''
      }
    },
    mounted() {
    },
    methods: {
        show(url) {
            this.videoDoc = true
            this.url = url
        },
        onClosePage() {
            console.log('close')
            this.videoDoc = false
        }
    }
}
</script>

